<template>
	<view class="record-container">
		<view class="header">
			<text class="header-title">历史记录</text>
		</view>
		
		<!-- 记录列表 -->
		<view class="record-list">
			<view v-if="parseRecords.length === 0" class="empty-tip">
				<text>暂无解析记录</text>
			</view>
			
			<view v-for="record in parseRecords" :key="record.id" class="record-item">
				<!-- 记录头部信息 -->
				<view class="record-header">
					<text class="record-title">{{ record.title }}</text>
					<text class="record-time">{{ formatTime(record.parseTime) }}</text>
				</view>
				
				<!-- 封面预览 -->
				<view class="record-preview">
					<image :src="record.coverUrl || '/static/bo.png'" mode="aspectFill" class="preview-image"></image>
				</view>
				
				<!-- 记录信息 -->
				<view class="record-info">
					<text v-if="record.author" class="author-name">{{ record.author }}</text>
					<view class="record-tags">
						<view v-if="record.videoUrl" class="tag video-tag">视频</view>
						<view v-if="record.hasImages" class="tag image-tag">图集</view>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="record-actions">
					<button class="action-btn copy-btn" @click="copyOriginalUrl(record.originalUrl)">复制原链接</button>
					<button class="action-btn reuse-btn" @click="reuseLink(record.originalUrl)">重新解析</button>
				</view>
			</view>
		</view>
		
		<!-- 清空按钮 -->
		<view v-if="parseRecords.length > 0" class="clear-container">
			<button class="clear-btn" @click="showClearConfirm">清空记录</button>
		</view>
	</view>
</template>

<script>
import util from '../../utils/util.js';

export default {
	data() {
		return {
			parseRecords: []
		};
	},
	
	onShow() {
		this.loadParseRecords();
	},
	
	methods: {
		// 加载解析记录
		loadParseRecords() {
			try {
				const records = uni.getStorageSync('parseRecords') || [];
				this.parseRecords = records;
			} catch (error) {
				console.error('加载解析记录失败', error);
			}
		},
		
		// 格式化时间显示
		formatTime(timeString) {
			const date = new Date(timeString);
			const now = new Date();
			const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
			
			if (diffDays === 0) {
				// 今天
				return date.getHours().toString().padStart(2, '0') + ':' + 
					date.getMinutes().toString().padStart(2, '0');
			} else if (diffDays === 1) {
				// 昨天
				return '昨天';
			} else if (diffDays < 7) {
				// 一周内
				return diffDays + '天前';
			} else {
				// 更早
				return (date.getMonth() + 1) + '-' + date.getDate();
			}
		},
		
		// 复制原链接
		copyOriginalUrl(url) {
			uni.setClipboardData({
				data: url,
				success: () => {
					util.showToast('复制成功');
				}
			});
		},
		
		// 重新解析链接
		reuseLink(url) {
			// 返回首页并设置链接
			uni.switchTab({
				url: '/pages/index/index'
			});
			
			// 延迟设置全局数据，确保首页已加载
			setTimeout(() => {
				// 使用全局状态管理或事件总线传递数据
				uni.$emit('setParseUrl', url);
			}, 500);
		},
		
		// 显示清空确认
		showClearConfirm() {
			uni.showModal({
				title: '确认清空',
				content: '确定要清空所有解析记录吗？此操作不可恢复。',
				confirmText: '确定',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.clearRecords();
					}
				}
			});
		},
		
		// 清空记录
		clearRecords() {
			try {
				uni.removeStorageSync('parseRecords');
				this.parseRecords = [];
				util.showToast('记录已清空');
			} catch (error) {
				console.error('清空记录失败', error);
				util.showToast('清空失败');
			}
		}
	}
};
</script>

<style scoped>
.record-container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header {
	padding: 20rpx 0;
	margin-bottom: 20rpx;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.empty-tip {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}

.record-list {
	gap: 20rpx;
}

.record-item {
	background-color: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.record-header {
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.record-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 20rpx;
}

.record-time {
	font-size: 24rpx;
	color: #999;
}

.record-preview {
	width: 100%;
	height: 400rpx;
	overflow: hidden;
	background-color: #f8f8f8;
}

.preview-image {
	width: 100%;
	height: 100%;
}

.record-info {
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.author-name {
	font-size: 26rpx;
	color: #666;
}

.record-tags {
	display: flex;
	gap: 10rpx;
}

.tag {
	padding: 4rpx 16rpx;
	border-radius: 16rpx;
	font-size: 22rpx;
}

.video-tag {
	background-color: #e8f4fc;
	color: #1989fa;
}

.image-tag {
	background-color: #fef0f0;
	color: #ee0a24;
}

.record-actions {
	padding: 20rpx;
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	background-color: #f5f5f5;
	color: #666;
	border: none;
	border-radius: 8rpx;
	font-size: 26rpx;
	padding: 20rpx 0;
}

.reuse-btn {
	background-color: #ff6b6b;
	color: #fff;
}

.clear-container {
	margin-top: 30rpx;
	padding: 0 20rpx;
}

.clear-btn {
	width: 100%;
	background-color: #fff;
	color: #ff4444;
	border: none;
	border-radius: 8rpx;
	font-size: 28rpx;
	padding: 24rpx 0;
}
</style>
